<template>
  <div class="app-container">
    <div class="bgWhite radius8 flex col-top  pt20  row-between pr20">
      <el-form class="pl20 pr20" :model="queryParams" ref="queryForm"
               :inline="true" v-show="showSearch" label-width="100px">
          <el-form-item label="手机号" prop="phoneNumber">
            <el-input
			    size="large"
                v-model="queryParams.phoneNumber"
                placeholder="搜索手机号"
                clearable
                @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="商机来源" prop="opportunitySource">
            <el-select
				size="large"
                v-model="queryParams.opportunitySource"
                placeholder="商机来源"
                clearable
                style="width: 200px">
              <el-option
                  v-for="dict in bus_source"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="分配状态" prop="distributionStatus">
            <el-select
				size="large"
                v-model="queryParams.distributionStatus"
                placeholder="分配状态"
                clearable
                style="width: 200px">
              <el-option
                  v-for="dict in bus_customer_allocation"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"/>
            </el-select>
          </el-form-item>
         
      </el-form>
	  <div class="flex" style="width: 200px;">
	    <el-button class="searchBtn" type="defaultBtn" @click="handleQuery">搜索</el-button>
	    <el-button class="searchBtn" icon="Refresh" @click="resetQuery">重置</el-button>
	  </div>
    </div>
    <div class="bgWhite radius8 p20 mt25">
      <div class="mb30 pt10 ">
        <span class="fb fs16">我的商机列表</span>
      </div>
      <el-table v-loading="loading" :data="opportunityList" @selection-change="handleSelectionChange"
	  :header-row-style="{background:'#FAFAFA',color:'#0C1019',height:'54px'}"
	  :cell-style="{height:'54px'}"
	  >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="客户名称" align="center" prop="customerName"/>
        <el-table-column label="商机来源" align="center" prop="opportunitySource">
          <template #default="scope">
            <dict-tag :options="bus_source" :value="scope.row.opportunitySource"/>
          </template>
        </el-table-column>
        <el-table-column label="手机号" align="center" prop="phoneNumber"/>
        <el-table-column label="归属部门" align="center" prop="departName"/>
        <el-table-column label="归属小组" align="center" prop="teamName"/>
        <el-table-column label="归属业务经理" align="center" prop="businessManagerName"/>
        <el-table-column label="分配状态" align="center">
          <template #default="scope">
			  <div class="flex col-center row-center"
			  :class="activeStatus(scope.row.distributionStatus)"
			  >
			  	<span class="drop"></span>
			  	<dict-tag :options="bus_customer_allocation" :value="scope.row.distributionStatus"/>
			  </div>
          </template>
        </el-table-column>

        <el-table-column label="添加时间" align="center" prop="createTime"/>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button
                link class="linkBtnColor" type="primary"
                @click="becomeCustomer(scope.row)"
                v-hasPermi="['opportunity:becomeCustomer']"
            >转为客户
            </el-button>
            <el-button
                link class="linkBtnColor" type="primary"
                @click="detailsOpenFun(scope.row)"
                v-hasPermi="['opportunity:getMyDetails']"
            >查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
          v-show="total>0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
      />
    </div>
    <!--    商机详情-->
    <el-dialog :title="title" center v-model="detailsOpen" width="700px" append-to-body>
      <el-descriptions title="" :column="2" border>
        <el-descriptions-item label="商机来源：">{{ getDictLabel(bus_source, detailsData.opportunitySource) }}
        </el-descriptions-item>
        <el-descriptions-item label="微信号码：">{{ detailsData.wxAccount }}</el-descriptions-item>
        <el-descriptions-item label="客户姓名：">{{ detailsData.customerName }}</el-descriptions-item>
        <el-descriptions-item label="手机号码：">{{ detailsData.phoneNumber }}</el-descriptions-item>
        <el-descriptions-item label="客户地址：">
				{{ detailsData.localProvinceName }} / {{detailsData.localCityName}} / {{detailsData.localCountyName}} / {{detailsData.localAreaName}}
		</el-descriptions-item>
        <el-descriptions-item label="客户作物：">{{ detailsData.cropNames }}</el-descriptions-item>
        <el-descriptions-item label="客户需求：">{{ detailsData.customerNeed }}</el-descriptions-item>
        <el-descriptions-item label="添加时间：">{{ detailsData.createTime }}</el-descriptions-item>
        <el-descriptions-item label="客户靶标：">{{ getDictLabel(bus_target, detailsData.customerTarget) }}
        </el-descriptions-item>
        <el-descriptions-item label="归属部门：">{{ detailsData.departName }}</el-descriptions-item>
        <el-descriptions-item label="归属小组：">{{ detailsData.teamName }}</el-descriptions-item>
        <el-descriptions-item label="归属业务经理：">{{ detailsData.businessManagerName }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
	<operateCustomer ref="customerPop" @refreshList="getList" :opportunity="opportunity" @clear="clear"></operateCustomer>
  </div>
</template>

<script setup name="teamOpportUnity">
import {
  getOpportunityInfo,
  listOpportunity
} from "@/api/business/myOpportunity.js";

import operateCustomer from '@/views/peoples/customer/components/operateCustomer.vue' //新增/编辑客户

const {proxy} = getCurrentInstance();
const {
  bus_source,
  bus_channel,
  honorific,
  bus_target,
  bus_other_tag,
  bus_customer_allocation
} = proxy.useDict("bus_source", "bus_channel", "honorific", "bus_target", "bus_other_tag", "bus_customer_allocation");



const opportunityList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    opportunitySource: null,
    phoneNumber: null,
    distributionStatus: null,
    opportunityDataType: 3,
  },
  rules: {
    postName: [{required: true, message: "", trigger: "blur"}],
  }
});
const {queryParams, form, rules} = toRefs(data);

/** 查询商机列表 */
function getList() {
  loading.value = true;
  listOpportunity(queryParams.value).then(response => {
    opportunityList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryForm");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  single.value = selection.length !== 1
  multiple.value = !selection.length
}

/*获取详情*/
const detailsOpen = ref(false);
const detailsData = ref({
  id: null,
  opportunitySource: null,
  wxAccount: null,
  customerName: null,
  phoneNumber: null,
  localArea: null,
  cropNames: null,
  customerNeed: null,
  createTime: null,
  customerTarget: null,
  departName: null,
  teamName: null,
  businessManagerName: null

});

/** 点击详情按钮 */
function detailsOpenFun(row) {
  const id = row.id || ids.value
  getOpportunityInfo(id).then(response => {
    detailsData.value = response.data;
    detailsOpen.value = true;
    title.value = "商机详情";
  });
};

// 根据字典数据和值获取对应的标签（汉字）
function getDictLabel(dict, value) {
 if(value){
 	let arr =  value.split(',')
 	let keyString = ''
 	for(let j in dict){
 		for(let key in arr){
 			if(arr[key] == dict[j].value){
 				keyString+=dict[j].label+','
 			}
 		}
 	}
 	return keyString.slice(0,-1)
 }
};
const opportunity = ref({
	// opportunityId:'',
	// customerName:'',
	// phoneNumber:''
})
function clear(){
	opportunity.value = ''
}
// 转为客户
function becomeCustomer(row) {
	opportunity.value = row
	console.log(opportunity.value,'opportunity.value')
	proxy.$refs.customerPop.open('')
  // proxy.$router.push('/peoples/customer_add?opportunityId=' + row.id)
}


getList();
</script>